<template>
    <div class="blog-area fix area-padding">
        <div class="container">
            <div class="row">
                <div class="blog-sidebar-right">
                    <div class="col-md-8 col-sm-8 col-xs-12">
                        <div class="row">
                            <div class="blog-left-content">
                                <!-- Start single blog -->
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div class="single-blog">
                                        <div class="blog-image">
                                            <a class="image-scale" href="#">
                                                <img
                                                    src="/img/blog/b1.jpg"
                                                    alt=""
                                                />
                                            </a>
                                        </div>
                                        <div class="blog-content">
                                            <div class="blog-meta">
                                                <span class="admin-type">
                                                    <i class="fa fa-user"></i>
                                                    Admin
                                                </span>
                                                <span class="date-type">
                                                    <i
                                                        class="fa fa-calendar"
                                                    ></i>
                                                    20 july, 2019
                                                </span>
                                                <span class="comments-type">
                                                    <i
                                                        class="fa fa-comment-o"
                                                    ></i>
                                                    13
                                                </span>
                                            </div>
                                            <a href="#">
                                                <h4>
                                                    Creative design clients
                                                    response is better
                                                </h4>
                                            </a>
                                            <p>
                                                Lorem ipsum, or lipsum as it is
                                                some known, is dummy text used
                                                in laying out print, graphic or
                                                web designs.
                                            </p>
                                            <a class="blog-btn" href="#">
                                                Read more</a
                                            >
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div class="single-blog">
                                        <div class="blog-image">
                                            <a class="image-scale" href="#">
                                                <img
                                                    src="/img/blog/b2.jpg"
                                                    alt=""
                                                />
                                            </a>
                                        </div>
                                        <div class="blog-content">
                                            <div class="blog-meta">
                                                <span class="admin-type">
                                                    <i class="fa fa-user"></i>
                                                    Admin
                                                </span>
                                                <span class="date-type">
                                                    <i
                                                        class="fa fa-calendar"
                                                    ></i>
                                                    13 may, 2018
                                                </span>
                                                <span class="comments-type">
                                                    <i
                                                        class="fa fa-comment-o"
                                                    ></i>
                                                    16
                                                </span>
                                            </div>
                                            <a href="#">
                                                <h4>
                                                    Web development is a best
                                                    work in future world
                                                </h4>
                                            </a>
                                            <p>
                                                Lorem ipsum, or lipsum as it is
                                                some known, is dummy text used
                                                in laying out print, graphic or
                                                web designs.
                                            </p>
                                            <a class="blog-btn" href="#">
                                                Read more</a
                                            >
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div class="single-blog">
                                        <div class="blog-image">
                                            <a class="image-scale" href="#">
                                                <img
                                                    src="/img/blog/b3.jpg"
                                                    alt=""
                                                />
                                            </a>
                                        </div>
                                        <div class="blog-content">
                                            <div class="blog-meta">
                                                <span class="admin-type">
                                                    <i class="fa fa-user"></i>
                                                    Admin
                                                </span>
                                                <span class="date-type">
                                                    <i
                                                        class="fa fa-calendar"
                                                    ></i>
                                                    24 april, 2019
                                                </span>
                                                <span class="comments-type">
                                                    <i
                                                        class="fa fa-comment-o"
                                                    ></i>
                                                    07
                                                </span>
                                            </div>
                                            <a href="#">
                                                <h4>
                                                    You can trust me and
                                                    business with together
                                                </h4>
                                            </a>
                                            <p>
                                                Lorem ipsum, or lipsum as it is
                                                some known, is dummy text used
                                                in laying out print, graphic or
                                                web designs.
                                            </p>
                                            <a class="blog-btn" href="#">
                                                Read more</a
                                            >
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div class="single-blog">
                                        <div class="blog-image">
                                            <a class="image-scale" href="#">
                                                <img
                                                    src="/img/blog/b4.jpg"
                                                    alt=""
                                                />
                                            </a>
                                        </div>
                                        <div class="blog-content">
                                            <div class="blog-meta">
                                                <span class="admin-type">
                                                    <i class="fa fa-user"></i>
                                                    Admin
                                                </span>
                                                <span class="date-type">
                                                    <i
                                                        class="fa fa-calendar"
                                                    ></i>
                                                    24 april, 2019
                                                </span>
                                                <span class="comments-type">
                                                    <i
                                                        class="fa fa-comment-o"
                                                    ></i>
                                                    07
                                                </span>
                                            </div>
                                            <a href="#">
                                                <h4>
                                                    Business man want to be
                                                    benefit any way
                                                </h4>
                                            </a>
                                            <p>
                                                Lorem ipsum, or lipsum as it is
                                                some known, is dummy text used
                                                in laying out print, graphic or
                                                web designs.
                                            </p>
                                            <a class="blog-btn" href="#">
                                                Read more</a
                                            >
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <div class="blog-pagination">
                                        <ul class="pagination">
                                            <li><a href="#">Prev</a></li>
                                            <li class="active">
                                                <a href="#">1</a>
                                            </li>
                                            <li><a href="#">2</a></li>
                                            <li><a href="#">3</a></li>
                                            <li><a href="#">Next</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 col-sm-4 col-xs-12">
                        <div class="left-head-blog right-side">
                            <div class="left-blog-page">
                                <form action="#">
                                    <div class="blog-search-option">
                                        <input
                                            type="text"
                                            placeholder="Search..."
                                        />
                                        <button class="button" type="submit">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <div class="left-blog-page">
                                <div class="left-blog blog-category">
                                    <h4>categories</h4>
                                    <ul>
                                        <li>
                                            <a href="#">Business</a
                                            ><span>12</span>
                                        </li>
                                        <li>
                                            <a href="#">Agency </a
                                            ><span>17</span>
                                        </li>
                                        <li>
                                            <a href="#">Media</a><span>07</span>
                                        </li>
                                        <li>
                                            <a href="#">Social</a
                                            ><span>18</span>
                                        </li>
                                        <li>
                                            <a href="#">Photoshop</a
                                            ><span>14</span>
                                        </li>
                                        <li>
                                            <a href="#">development</a
                                            ><span>10</span>
                                        </li>
                                        <li>
                                            <a href="#">Design</a
                                            ><span>15</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="left-blog-page">
                                <!-- recent start -->
                                <div class="left-blog">
                                    <h4>recent post</h4>
                                    <div class="recent-post">
                                        <!-- start single post -->
                                        <div class="recent-single-post">
                                            <div class="post-img">
                                                <a href="#">
                                                    <img
                                                        src="/img/blog/b1.jpg"
                                                        alt=""
                                                    />
                                                </a>
                                            </div>
                                            <div class="pst-content">
                                                <p>
                                                    <a href="#"
                                                        >We offer professional
                                                        Consultant services.</a
                                                    >
                                                </p>
                                                <span class="date-type">
                                                    26 Jan / 2019
                                                </span>
                                            </div>
                                        </div>

                                        <div class="recent-single-post">
                                            <div class="post-img">
                                                <a href="#">
                                                    <img
                                                        src="/img/blog/b2.jpg"
                                                        alt=""
                                                    />
                                                </a>
                                            </div>
                                            <div class="pst-content">
                                                <p>
                                                    <a href="#"
                                                        >CODIUX is an firm and
                                                        general group.</a
                                                    >
                                                </p>
                                                <span class="date-type">
                                                    20 June / 2019
                                                </span>
                                            </div>
                                        </div>

                                        <div class="recent-single-post">
                                            <div class="post-img">
                                                <a href="#">
                                                    <img
                                                        src="/img/blog/b3.jpg"
                                                        alt=""
                                                    />
                                                </a>
                                            </div>
                                            <div class="pst-content">
                                                <p>
                                                    <a href="#"
                                                        >Business man always
                                                        think positive.</a
                                                    >
                                                </p>
                                                <span class="date-type">
                                                    26 Feb / 2019
                                                </span>
                                            </div>
                                        </div>

                                        <div class="recent-single-post">
                                            <div class="post-img">
                                                <a href="#">
                                                    <img
                                                        src="/img/blog/b4.jpg"
                                                        alt=""
                                                    />
                                                </a>
                                            </div>
                                            <div class="pst-content">
                                                <p>
                                                    <a href="#"
                                                        >Man can change business
                                                        policy all time.</a
                                                    >
                                                </p>
                                                <span class="date-type">
                                                    13 Nov / 2019
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="left-blog-page">
                                <div class="left-tags blog-tags">
                                    <div
                                        class="popular-tag left-side-tags left-blog"
                                    >
                                        <h4>popular tags</h4>
                                        <ul>
                                            <li><a href="#">Business</a></li>
                                            <li><a href="#">Agency </a></li>
                                            <li><a href="#">Media</a></li>
                                            <li><a href="#">Social</a></li>
                                            <li><a href="#">Photoshop</a></li>
                                            <li><a href="#">Seo</a></li>
                                            <li><a href="#">development</a></li>
                                            <li><a href="#">Search</a></li>
                                            <li><a href="#">Design</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "BlogSidebar",
};
</script>

<style scoped>
</style>
